<template>
  <div>
    <div class="page_title">视频管理</div>
    <FormTable :formRules="formRules" :tableData="tableData" :columns="columns" :total="total" :currentPage="pageIndex"
      :pageSize="pageSize" @changeTableData="changeTableData" @queryTable="queryTable">
      <template #tableTabs>
        <div style="display: flex;justify-content: end;margin-bottom: 16px;">
          <el-button type="primary" @click="edit1()">新增</el-button>
        </div>
      </template>
      <template #operator="{ slotProps }" class="table_button_list">
        <el-button link type="primary" @click="edit1(slotProps)">修改</el-button>
        <el-popconfirm class="box-item" title="确认删除吗？" placement="top-start" @confirm="delItem(slotProps)">
          <template #reference>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </FormTable>
    <hdglForm v-model="dialogVisible" :dataForm="dialogForm" v-if="dialogVisible" @close="dialogVisible = false"
      :isDetail="isDetail" :isFabu="isFabu" @getDatas="queryTable()" />
  </div>
</template>
<script>
import FormTable from "@/components/FormTable/index.vue"
import hdglForm from "./spglForm.vue"
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { getVideosByManagePage, addOrUpdateVideo } from "@/api/api"
import moment from 'moment'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: '',
  components: { FormTable, hdglForm },
  setup () {
    const dataMap = reactive({
      tableData: [],
      formRules: [
        {
          type: "input",
          field: "title",
          title: "视频名称",
          value: "",
        }
      ],
      searchForm: {
        title: "",
      },
      columns: [
        {
          label: "序号",
          type: "index",
          width: '70px'
        },
        {
          label: "视频名称",
          prop: "title",
        },
        // {
        //   label: "介绍",
        //   prop: "introduction",
        //   showOverflowTooltip:true,
        // },
        {
          label: "栏目",
          prop: "vcolumn",
          formatter (label, row) {
            let str = label
            switch (label)
            {
              case "zljckcgypxsp":
                str = "质量基础课程公益培训视频"
                break
              case "lnzfzljjyfxsp":
                str = "历年政府质量奖经验分享视频/手册"
                break
              case "jyjcpxsp":
                str = "检验检测云课堂-培训视频"
                break
            }
            return str
          },
        },
        {
          label: "是否发布",
          align: 'center',
          width: '80px',
          prop: "status",
          formatter (label, row) {
            return label == 1 ? "已发布" : "未发布"
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
          align: 'center',
          width: '160px'
        },
        {
          prop: 'operator',
          label: "操作",
          align: 'center',
          width: '120px'
        },
      ],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      isDetail: false,
      isFabu: false,
      dialogForm: {},
    })
    const methodsMap = reactive({
      detail (items) {
        dataMap.dialogForm = items
        dataMap.isDetail = true
        dataMap.isFabu = false
        dataMap.dialogVisible = true
      },
      edit2 (items) {
        if (items.draft)
        {
          try
          {
            let temp = JSON.parse(items.draft)
            dataMap.dialogForm = {
              ...temp,
              exerciseStartTime: moment(temp.exerciseStartTime).format("YYYY-MM-DD hh:mm:ss"),
              exerciseEndTime: moment(temp.exerciseEndTime).format("YYYY-MM-DD hh:mm:ss")
            }
          } catch (error)
          {
            dataMap.dialogForm = items
          }
        } else
        {
          dataMap.dialogForm = items
        }
        dataMap.isDetail = false
        dataMap.isFabu = true
        dataMap.dialogVisible = true
      },
      edit1 (items) {
        if (items)
        {
          dataMap.dialogForm = items
        } else
        {
          dataMap.dialogForm = {
            exerciseContent: ""
          }
        }
        dataMap.isDetail = false
        dataMap.isFabu = false
        dataMap.dialogVisible = true
      },

      delItem(item){
        addOrUpdateVideo({ id: item.id, isDel :'1'}).then(res=>{
          ElMessage.success('删除成功');
          methodsMap.getDatas();
        });
      },
      changeTableData (pageNum, pageSize) {
        dataMap.pageIndex = pageNum
        dataMap.pageSize = pageSize
        methodsMap.getDatas()
      },
      getDatas () {

        getVideosByManagePage(
          {
            "pageNum": dataMap.pageIndex,
            "pageSize": dataMap.pageSize,
            "groups": [],
            "rules": [
              {
                field: "title",
                data: dataMap.searchForm.title || "",
                opType: "Contains"
              }
            ],
            "orderBys": [
            ]
          }).then((res) => {
            console.log("列表调用结束", Date.now())
            console.log("列表数量", res.data.total)
            dataMap.tableData = res.data.data.list
            dataMap.total = res.data.data.total
          })
      },
      queryTable (params) {
        dataMap.searchForm = params || {}
        dataMap.pageIndex = 1
        methodsMap.getDatas()
      }
    })
    onMounted(() => {
      methodsMap.getDatas()
    })
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
    }
  },
})
</script>
<style lang="scss" scoped></style>